<html>
<head>
    <title>公交化-页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../icon/favicon.ico" rel="shortcut icon"/>
    <script src="../modules/vue/vue-2.js"></script>
    <script src="../../vue/js/moment/moment-2.24.0.js"></script>
    <script src="../modules/element-ui/element-ui-2.15.10.js"></script>
    <link rel="stylesheet" href="../modules/element-ui/element-ui-2.15.10.css"/>
    <link rel="stylesheet" href="../modules/element-ui/element-ui-2.15.10-icon.css"/>
    <link href="../modules/element-ui/fonts/element-icons.ttf"/>
    <link href="../modules/element-ui/fonts/element-icons.woff"/>
    <script src="../modules/axios/axios-1.1.3.min.js"></script>
    <script src="./mock/demo-api-resp.js"></script>
    <link href="../css/i2f-animation.css" rel="stylesheet" type="text/css"/>
    <link href="../css/i2f-css.css" rel="stylesheet" type="text/css"/>
    <link href="../css/i2f-theme.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app" style="padding: 5px">
    <el-form inline @keyup.enter.native="queryList">
        <el-form-item label="日期" class="i-ani-fade-in-right">
            <el-date-picker
                    clearable
                    v-model="form.day"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :picker-options="dateOptions"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="车牌号" class="i-ani-fade-in-down">
            <!--            <el-select v-model="carNumber" placeholder="请选择">-->
            <!--                <el-option-->
            <!--                        v-for="item in carNumberList"-->
            <!--                        :key="item.value"-->
            <!--                        :label="item.label"-->
            <!--                        :value="item.value">-->
            <!--                </el-option>-->
            <!--            </el-select>-->
            <el-input
                    clearable
                    v-model="form.carNumber"
                    placeholder="车牌号"/>
        </el-form-item>
        <!--        <el-form-item label="时段">-->
        <!--            <el-select v-model="segment" placeholder="请选择">-->
        <!--                <el-option-->
        <!--                        v-for="item in segmentList"-->
        <!--                        :key="item.value"-->
        <!--                        :label="item.label"-->
        <!--                        :value="item.value">-->
        <!--                </el-option>-->
        <!--            </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="关键字" class="i-ani-fade-in-up">
            <el-input
                    clearable
                    v-model="form.searchStr"
                    placeholder="查路线名、车牌号、司机名、跟车人名"
            />
        </el-form-item>
        <el-form-item label="更多" class="i-ani-fade-in-left">
            <el-select clearable v-model="form.dynamicOptions" multiple placeholder="请选择">
                <el-option
                        v-for="item in dynamicOptionsList"
                        :key="item.itemValue"
                        :label="item.itemText"
                        :value="item.itemValue">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item class="i-ani-fade-in-bounce">
            <el-button :loading="loading" type="primary" @click="queryList">查询</el-button>
        </el-form-item>

    </el-form>
    <el-checkbox v-model="carousel" class="carousel-checkbox i-ani-shake">轮播</el-checkbox>
    <component :is="carousel?$elementUi.Carousel:$virtualUi.VDiv" :interval="5000" arrow="never"
               indicator-position="none">
        <div v-for="(card,index) in cards" class="i-ani-fade-in-left">
            <component :is="carousel?$elementUi.CarouselItem:$virtualUi.VDiv">
                <div :class="'bus-card '+ cardTheme(card)">
                    <div class="bus-title i-ani-fade-in-up">
                        <div class="bus-title-content">
                            <div class="bus-car-number i-ani-breath">
                                {{card.head.carNumber}}
                            </div>
                            <div>
                                {{card.head.segmentTimeDesc}}
                            </div>
                            <div>
                                {{card.head.routeName}}
                            </div>
                            <div>
                                {{card.head.driverName}}
                            </div>
                            <div>
                                {{card.head.parentIdDesc}}
                            </div>
                            <div>
                                {{card.head.businessTypeDesc}}
                            </div>
                        </div>
                    </div>
                    <div class="bus-sites">
                        <el-steps align-center ref="steps" :card="card" class="steps-bus" :active="6">
                            <template v-for="(item,index) in card.body">
                                <el-step :status="siteStatus(item,index,card.body)">
                                    <!--                            <i slot="icon" class="el-icon-edit"></i>-->
                                    <div slot="title">
                                        <div class="title-time title-end">
                                            {{item.realEndTimeDesc ? item.realEndTimeDesc :
                                            (item.planEndTimeDesc?item.planEndTimeDesc:'--:--')}}&nbsp;
                                        </div>
                                        <div class="recovery-title">
                                            <i class="el-icon-truck car-icon"
                                               :style="siteCarStyle(item,index,card.body)"></i>
                                            <el-popover
                                                    slot="description"
                                                    placement="top-start"
                                                    title="图标事件"
                                                    width="200"
                                                    trigger="hover">
                                                <i slot="reference" class="el-icon-link recovery-icon"></i>
                                                图标事件
                                            </el-popover>
                                            {{item.routeDetailDesc}}
                                        </div>
                                        <div class="title-time title-begin">
                                            {{item.realBeginTimeDesc ? item.realBeginTimeDesc :
                                            (item.planBeginTimeDesc?item.planBeginTimeDesc:'--:--')}}&nbsp;
                                        </div>
                                    </div>
                                    <template v-if="item.alarmMsgs">
                                        <el-popover
                                                v-for="(alarm,aidx) in item.alarmMsgs"
                                                slot="description"
                                                placement="top-start"
                                                title="告警信息"
                                                width="200"
                                                trigger="hover">
                                            <div slot="reference">
                                                {{alarm.t == 1 ? "静止超时" : (alarm.t == 2 ? "行驶超时" : alarm.t == 3
                                                ?
                                                "离线超时" : "未到站")}}
                                            </div>
                                            告警ID：{{alarm.id}}
                                            <template if="alarm.s==1">
                                                <el-divider></el-divider>
                                                <div style="text-align: center">
                                                    <el-button type="primary" size="small">处置</el-button>
                                                </div>
                                            </template>
                                        </el-popover>
                                    </template>
                                </el-step>
                            </template>
                        </el-steps>
                    </div>
                </div>
            </component>
        </div>
    </component>
    <el-row style="color: coral;" class="i-ani-fade-in-left-up">
        <a class="i-a i-ani-spin" href="./demo.zip" target="_self" download="demo.zip">[下载源码]</a></br>
        1.对文字部分具有完全控制权和事件响应能力<br/>
        2.对图标具有事件响应能力，可以设置图标<br/>
        3.对连线不具备控制权和事件响应能力<br/>
    </el-row>
</div>
</body>
<style>

    .carousel-checkbox {
        position: fixed;
        top: 5px;
        right: 5px;
        color: white;
        background: lightblue;
        border-radius: 999px;
        padding: 8px;
        text-align: center;
    }

    .bus-card {
        clear: both;
        width: 100%;
        padding: 0px;
        margin: 5px;
        text-align: center;
        overflow: hidden;
        height: 33vh;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .bus-card .bus-title, .bus-sites {
        float: left;
        display: inline-block;
        height: 100%;
    }

    .bus-title {
        width: 15%;
        text-align: center;
    }

    .bus-title div {
        margin: 5px auto;
        font-size: 14px;
        font-weight: bold;
    }

    .bus-title .bus-title-content {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bus-title .bus-car-number {
        font-size: 16px;
        font-weight: bold;
        width: 60%;
        border-radius: 18px;
        padding: 5px;
    }

    .bus-sites {
        width: 85%;

    }


    .theme-blue {
        border: solid 1px deepskyblue;
        box-shadow: 3px 3px 8px 1px deepskyblue;
    }

    .theme-blue .bus-title {
        background-image: linear-gradient(120deg, cyan, deepskyblue);
        color: white;
    }

    .theme-blue .bus-car-number {
        color: deepskyblue;
        background-color: white;

    }

    .theme-red {
        border: solid 1px orangered;
        box-shadow: 3px 3px 8px 1px orangered;
    }

    .theme-red .bus-title {
        background-image: linear-gradient(120deg, yellow, orangered);
        color: white;
    }

    .theme-red .bus-car-number {
        color: orangered;
        background-color: white;

    }

    .theme-green {
        border: solid 1px limegreen;
        box-shadow: 3px 3px 8px 1px limegreen;
    }

    .theme-green .bus-title {
        background-image: linear-gradient(120deg, springgreen, limegreen);
        color: white;
    }

    .theme-green .bus-car-number {
        color: limegreen;
        background-color: white;

    }

    .steps-bus {
        padding-top: 30px;
        width: 100%;
        height: calc(100% - 10px);
        overflow: hidden;
    }

    .steps-bus:hover {
        overflow: auto;
    }

    .steps-bus .el-step__title {
        writing-mode: tb-rl;
        margin: 8px auto;
        font-size: 18px;
    }

    .steps-bus .el-step {
        max-width: unset !important;
        flex: 0 0 auto;
        width: 300px;
        flex-basis: unset !important;
    }

    .steps-bus .el-step__title .title-time {
        font-size: 12px;
        font-weight: normal;
        text-align: start;
        writing-mode: initial;
        position: relative;
        top: -50px;
    }

    .steps-bus .title-end {
        right: 10px;
    }

    .steps-bus .title-begin {
        left: 10px;
    }

    .steps-bus .is-process {
        color: #409EFF;
        border-color: #409EFF;
    }


    .recovery-title {
        margin-top: -60px;
    }

    .car-icon {
        position: relative;
        z-index: 200;
        top: -3px;
        /*opacity: 0;*/
        width: 24px;
        height: 24px;
        /*background: red;*/
        left: 1px;
    }

    .recovery-icon {
        position: relative;
        z-index: 200;
        top: -2px;
        opacity: 0;
        width: 24px;
        height: 24px;
        background: red;
        left: 3px;
    }

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: #f5f5f5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
        -webkit-box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
        border-radius: 10px;
        background-color: #f5f5f5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
        -webkit-box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
        background-color: #c7c7c7;
    }
</style>
<script>
    let request = axios.create({
        // baseURL: 'http://localhost:8084/',
        timeout: 6000,
        headers: {
            "X-Access-Token": ''
        }
    })
    let VDiv = Vue.extend({
        name: 'VDiv',
        template: '<div><slot></slot></div>',
        data() {
            return {}
        }
    });
    Vue.prototype.$axios = request;
    Vue.prototype.$elementUi = {...ELEMENT};
    Vue.prototype.$virtualUi = {VDiv};
    new Vue({
        components: {
            ...this.$elementUi, ...this.$virtualUi
        },
        data() {
            return {
                cards: [],
                form: {
                    day: moment(new Date().getTime()).format('YYYY-MM-DD'),
                    carNumber: '',
                    searchStr: '',
                    dynamicOptions: ['0'],
                },
                loading: false,
                carousel: false,
                dynamicOptionsList: [],
                carNumberList: [
                    {
                        value: '1001',
                        label: '闵A12345'
                    },
                    {
                        value: '1002',
                        label: '闵A12333'
                    }
                ],
                segment: '1001',
                segmentList: [
                    {
                        value: '1001',
                        label: '07:30-09:30'
                    },
                    {
                        value: '1002',
                        label: '13:00-15:30'
                    }
                ],
                dateOptions: {
                    disabledDate: function (date) {
                        return date.getTime() > new Date().getTime()
                    }
                }
            }
        },
        mounted() {
            this.initComponents();
        },
        computed: {},
        methods: {
            moment: window.moment,
            initComponents() {
                this.queryDynamicOptions();
                this.queryList();
            },
            centerCurrentSite() {
                let steps = this.$refs.steps;
                for (let i = 0; i < steps.length; i++) {
                    let item = steps[i].$el;
                    let body = steps[i].$attrs.card.body;
                    let pcnt = 0;
                    for (let i = 0; i < body.length; i++) {
                        if (body[i].passFlag == 1) {
                            pcnt++;
                        }
                    }
                    let rate = (pcnt) * 1.0 / body.length;
                    let x = Math.floor(item.scrollWidth * rate) - item.clientWidth / 2;
                    item.scrollTo({
                        left: x,
                        behavior: 'smooth'
                    });
                }

            },
            siteCarStyle(item, index, body) {
                if (item.passFlag == 0) {
                    if (index == 0 || body[index - 1].passFlag == 1) {
                        let ret = 'opacity:1;';
                        if (item.inAreaFlag == 0) {
                            ret += 'left: calc(1px + 120px);';
                        }
                        return ret;
                    }
                }
                return 'opacity:0;left: 1px;';
            },
            siteStatus(item, index, body) {
                if (item.passFlag == 0) {
                    if (index == 0 || body[index - 1].passFlag == 1) {
                        return 'process'
                    }
                    return 'wait'
                }
                if (item.arriveFlag == '1') {
                    return 'success'
                }
                return 'error'
            },
            cardTheme(card) {
                let ret = 'theme-green';
                let body = card.body;
                let pcnt = 0;
                let acnt = 0;
                for (let i = 0; i < body.length; i++) {
                    if (body[i].passFlag == 1) {
                        pcnt++;
                        if (body[i].alarmMsgs) {
                            acnt++;
                        }
                    }

                }
                if (pcnt < body.length) {
                    ret = 'theme-blue';
                }
                if (acnt / body.length > 0.66) {
                    ret = 'theme-red';
                }
                return ret;
            },
            queryDynamicOptions() {
                this.mockQueryDynamicOptions();
                this.$axios({
                    url: '/biz/bizCarRealArrive/queryDynamicOptions',
                    method: 'get',
                    params: {}
                }).then(({data: {result: result}}) => {
                    this.dynamicOptionsList = result;
                });
            },
            mockQueryDynamicOptions() {
                this.dynamicOptionsList = mockDynamicOptionsResult;
            },
            queryList() {
                this.loading = true;
                let dynamicOptionStr = '';
                for (let i = 0; i < this.form.dynamicOptions.length; i++) {
                    if (i != 0) {
                        dynamicOptionStr += ',';
                    }
                    dynamicOptionStr += this.form.dynamicOptions[i];
                }
                let params = {
                    sumDay: this.form.day,
                    carNumber: this.form.carNumber,
                    searchStr: this.form.searchStr,
                    dynamicOptions: dynamicOptionStr
                };
                this.mockQueryCarList();
                this.$axios({
                    url: '/biz/bizCarRealArrive/cardList',
                    method: 'get',
                    params: params
                }).then(({data: {result: result}}) => {
                    this.cards = result;
                    for (let i = 0; i < this.cards.length; i++) {
                        let item = this.cards[i];
                        if (item.head.alarmMsgs) {
                            item.head.alarmMsgs = JSON.parse(item.head.alarmMsgs)
                        }
                        for (let bi = 0; bi < item.body.length; bi++) {
                            let bd = item.body[bi];
                            if (bd.alarmMsgs) {
                                bd.alarmMsgs = JSON.parse(bd.alarmMsgs)
                            }
                        }
                    }
                }).finally(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                        this.centerCurrentSite();
                    })
                })
            },
            mockQueryCarList() {
                this.cards = mockCarList;
                for (let i = 0; i < this.cards.length; i++) {
                    let item = this.cards[i];
                    if (item.head.alarmMsgs) {
                        item.head.alarmMsgs = JSON.parse(item.head.alarmMsgs)
                    }
                    for (let bi = 0; bi < item.body.length; bi++) {
                        let bd = item.body[bi];
                        if (bd.alarmMsgs) {
                            bd.alarmMsgs = JSON.parse(bd.alarmMsgs)
                        }
                    }
                }
            }
        }
    }).$mount('#app')
</script>
</html>
